<template>
	<view class="content">
		<view class="uni-panel-c">
			<view class="uni-panel-top">
				<!-- <text class="uni-text-logo">{{book_name}}</text> -->
				<text class="uni-text-count">请在AI识别结果中选择生词加入到生词本</text>
			</view>
			<view class="uni-panel-bottom">
				<view class="uni-panel-item">
					<image class="uni-image" src="/static/img/back.png" mode="widthFix" @click="clickBack"></image>
					<text class="uni-text-item">生词 {{studyCount}} 个，认识单词 {{knowCount}} 个</text>
					<checkbox class="uni-text-item" :checked="isSelectAll" @click="clickSelectAll">全选</checkbox>
					<text class="uni-text-item" @click="clickStudyWord">加入生词本</text>
				</view>
				<scroll-view class="uni-panel" scroll-y="true" @scrolltolower="onLoadMore">
					<view class="uni-panel-book-line" v-for="(itemLine, indexLine) in listWord" :key="indexLine">
						<view class="uni-panel-book" v-for="(item, index) in itemLine" :key="index" @click="clickWordItem(item)">
							<view class="uni-panel-book-item">
								<text class="uni-text-word" >{{item.word}}</text>
								<image class="uni-word-image" :src="listOp[item.opIndex]" mode="widthFix" @click.stop="clickWordOp(item)"></image>
							</view>
							<view class="uni-panel-book-item" v-if='item.isShowZh'>
								<text class="uni-text-word-zh" >{{item.word_zh}}</text>
								<text class="uni-text-word-zh" >{{item.phonetic}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { editNewWord, getWordInfo, playMusic } from '@/api/api.js';
	import { HTTP_REQUEST_URL, VOICE_PATH } from '@/config/app.js';
	import store from "../../store";
	export default {
		mounted() {
		        // #ifdef APP-PLUS
		        plus.screen.lockOrientation('landscape');
		        // #endif
		    },
		data() {
			return {
				userId: 0,
				studyCount: 0,
				knowCount: 0,
				listWord: [],
				listAllWord: [],
				selectItem: undefined,
				isPlayMusic: false,
				loadCount: 0,
				listOp: ['../../static/img/ok_gray.png', 
						'../../static/img/error.png', 
						'../../static/img/ok.png'],
				studyWords: [],
				newbook_id: 0,
				isSelectAll: false,
				isClickDisable: false
			}
		},
		onLoad(options) {
			const userInfo = store.state.app.userInfo;
			if( userInfo){
				this.userId = userInfo.id;
			}
			let student = uni.getStorageSync('student_info');
			if( student){
				this.userId = student.id;
			}
			this.studyWords = decodeURIComponent(options.words).split(',');
			this.newbook_id = options.newbook_id;
			this.loadUnits();
		},
		methods: {
			loadUnits(){
				let ret = [];
				for( let word of this.studyWords){
					ret.push({word, isShowZh:false, opIndex:0}) 
				}
				this.listAllWord = ret;
				this.isSelectAll = false
				this.studyCount = 0;
				this.knowCount = 0;
				this.listWord = [];
				this.loadCount = 0;
				this.loadWords();
			},
			clickBack(){
				uni.navigateBack();
			},
			clickWordItem(item){
				if(!this.isPlayMusic){
					let filename = HTTP_REQUEST_URL + VOICE_PATH + item.word + '.mp3'
					let that = this;
					playMusic( filename, playing=>{
						that.isPlayMusic = playing;
					})
				}
				if(this.selectItem && this.selectItem != item){
					this.selectItem.isShowZh = false;
				}
				this.selectItem = item;
				if( item.word_zh){
					item.isShowZh = !item.isShowZh;
				}else{
					let that = this;
					let params = {word:item.word};
					getWordInfo(params).then(res => {
						console.log(res)
						if(res.data){
							item.word_zh = res.data.word_zh;
							item.phonetic = res.data.phonetic;
							item.isShowZh = true;
						}
					})
				}
			},
			clickWordOp(item){
				item.opIndex++;
				if( item.opIndex >= this.listOp.length){
					item.opIndex = this.listOp.length-2;
				}
				this.studyCount = 0;
				this.knowCount = 0
				for(let item of this.listAllWord){
					if( item.opIndex > 0){
						if( item.opIndex == this.listOp.length-1){
							this.knowCount++;
						}else{
							this.studyCount++;
						}
					}
				}
			},
			clickStudyWord(){
				let words = '';
				let words_known = '';
				for(let item of this.listAllWord){
					if( 1 == item.opIndex){
						words += item.word + ',';
					}else if( 2 == item.opIndex){
						words_known += item.word + ',';
					}
				}
				words = words.substring(0, words.length - 1);
				words_known = words_known.substring(0, words_known.length - 1);
				if(words.length <= 0){
					uni.showToast({
					    title: '至少要选择一个生词',
						icon: 'none',
					    duration: 2000
					});
					return;
				}
				if( this.isClickDisable){
					return;
				}
				this.isClickDisable = true;
				// 开始复习
				let params = {word:words, user_id:this.userId, newbook_id: this.newbook_id, is_add:true};
				editNewWord(params).then(res => {
					if(0 == res.code){
						uni.showToast({
						    title: '添加生词本成功',
							icon: 'none',
						    duration: 2000
						});
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			onLoadMore(){
				setTimeout(() => {
					this.loadWords();
				}, 100);
			},
			loadWords(){
				let lineItem = [];
				for( let i=0; i<40; i++){
					if( this.loadCount >= this.listAllWord.length){
						if( lineItem.length > 0){
							this.listWord.push(lineItem);
						}
						break;
					}
					let item = this.listAllWord[this.loadCount];
					this.loadCount++;
					
					lineItem.push(item)
					if(lineItem.length >= 4){
						// 每行4个
						this.listWord.push(lineItem);
						lineItem = [];
					}
				}
			},
			clickSelectAll() {
				this.isSelectAll = !this.isSelectAll
				console.log(this.isSelectAll)
				for( let item of this.listAllWord){
					item.opIndex = this.isSelectAll ? 1 : 0
				}
				this.studyCount = this.isSelectAll ? this.listAllWord.length : 0;
				this.knowCount = 0
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/bg.jpg');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.uni-panel-c {
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.uni-panel-top {
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.uni-image {
		width: 6%;
	}
	.uni-text-logo{
		color: white;
		font-size: 5vmin;
		text-align: center;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	.uni-text-count{
		color: white;
		font-size: 4vmin;
		text-align: center;
	}
	
	.uni-panel-bottom {
		width: 100%;
		height: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.uni-panel-item {
		background-color: #f5f7e2;
		width: 90%;
		height: 10%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-text-item{
		font-size: 4vmin;
		color: black;
		margin-right: 20rpx;
	}
	.uni-text-unit{
		width: 30%;
		font-size: 4vmin;
		display: flex;
		justify-content: center;
		color: black;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.uni-panel {
		width:90%;
		height: 90%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		overflow: auto;
	}
	.uni-panel-book-line{
		height: 15%;
		display: flex;
		flex-direction: row;
		margin-top: 3%;
	}
	.uni-panel-book {
		height: 100%;
		width: 21%;
		margin-right: 2%;
		border-radius: 10rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 1% 1%;
	}
	
	.uni-panel-book-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.uni-word-image {
		width: 14%;
		height: auto;
	}
	
	.uni-text-word{
		font-size: 4vmin;
		width: 85%;
		color: black;
		font-weight: bold;
	}
	
	.uni-text-word-zh{
		font-size: 3vmin;
		color: gray;
	}
	
</style>
